<template>
    <div class="swiperTop">
        <van-swipe class="mySwipe" :autoplay="3000" indicator-color="pink" lazy-render>
            <van-swipe-item v-for="(image,index) in state.images" :key="index">
                <img :src="image.pic" />
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
import { reactive,onMounted } from "vue";
import { reqBannerList } from "@/api";
export default {
   name:'SwiperTop',
   data() {
      return {
      }
   },
   created(){
   },
   computed:{
       
   },
   methods:{
   },
   mounted() {
       
   },
   setup() {
       const state = reactive({
           images:[
                'https://cdn.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
                'https://cdn.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
           ]
       });
       onMounted(async()=>{
            let result = await reqBannerList()
            state.images = result.banners
       })
           return {state}
   }
}
</script>

<style lang='less'>
    .mySwipe {
        width: 100%;
        // padding: .2rem;
        
        .van-swipe__track{

            .van-swipe-item {
                padding: 0 0.2rem;
                img{
                    width: 100%;
                    height: 3rem;
                    border-radius: 0.2rem;
                }
            }
        }
    }
</style>    
